﻿@{
    Layout = null;
}
<script type="text/html" id="image-full-screen-template">
    <div style="position: fixed; top: 60px; right: 75px; z-index: 2;" data-bind="click: backToAlbums">
        <span class="glyphicon glyphicon-remove p-arrow" style="font-size: 40px;"></span>
    </div>
    <div class="shadow-control left" data-bind="click: prev">
        <span style="margin-top: 100%;font-size: 30px;" class="glyphicon glyphicon-chevron-left pull-right"></span>
    </div>
    <div class="shadow-control right" data-bind="click: next">
        <span style="margin-top: 100%; font-size: 30px;" class="glyphicon glyphicon-chevron-right pull-left"></span>
    </div>
    <div style="position: relative;margin: 0 auto;text-align: center;vertical-align: top;">
        <div data-bind="style:{'min-height': '600px','min-height': '700px', position:'relative'}">
            <img class="image-g" style="max-height: 700px;" data-bind="attr:{ src: fullImage().urlFull }" />
        </div>
        <div style="max-width: 100%; display: inline-block;margin-top: 10px; background-color: #333;height: 126px; overflow-x: scroll; overflow-y: hidden;">
            <ul class="f-image-albums" data-bind="style:{width:(Photos().length * 110) +'px'}">
                <!-- ko if: Photos().length > 0 -->
                <!-- ko foreach: Photos() -->
                <li class="f-image-album-block" data-bind="css:{'f-image-album-block-active': isActive}">
                    <a href="#">
                        <div class="cover-image" data-bind="click: goFullScreen,style: { 'background-image': 'url('+url+')'}">
                        </div>
                    </a>
                </li>
                <!-- /ko -->
                <!-- /ko -->
            </ul>
        </div>
    </div>
</script>
